<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mr.郭/QQ:1007694939">
    <title>郭健博客 | 一个对web前端开发有着浓厚兴趣的90后站长网</title>
    <meta name="keywords" content="郭健,个人博客,yzmcms模板">
    <meta name="description"
          content="郭健,一名90后草根站长,互联网IT行业爱好者、对网站建设特别感兴趣,目前是一名web前端创业者；关注于web前端技术和CMS建站技术的学习研究,同时博客免费提供了yzmcms的各类模板(带源码)下载学习!">
    <!--引入Font Awesome字体库样式表-->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!--引入guojian.min.css组件样式表-->
    <link rel="stylesheet" href="/static/css/guojian.min.css">
    <!--引入style.css自定义样式表-->
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/jquery.pagination.css">
    <!--引入jquery.min.js组件脚本-->
    <script src="/static/js/jquery-1.12.4.min.js"
            type="text/javascript"></script>
    <script src="/static/js/jquery.pagination.min.js"></script>


    <script>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        })
    </script>
    <style type="text/css">
        body {
            background-image: none;
        }

        .gj-content .gj-cont pre, .gj-zp-cont .gj-cont pre {
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
    </style>
</head>

<body>
<div id="app">
    <!--GJ-UI组件模块html代码开始-->
    <nav class="gj-nav1 gcl-yh">
        <!--响应式导航栏-->
        <div class="gnav gclear">
            <div class="gj-logo gj-left">
                <a href="" title="郭健博客" style="color:#fff;font-size:30px;letter-spacing: 2px;margin: 4px 0;">郭健博客</a>
            </div>
            <i class="gbar fa fa-bars" aria-hidden="true"></i>
            <ul class="gnav-ul gj-right">
                <li class="gxz"><a href=""><i class="fa fa-home" aria-hidden="true"></i> 首页</a></li>
                {% for category in categories %}
                    <li>
                        {#                        <a href="{{ url('index:my_index',args=(1,category.id)) }}">{{ category.name }}</a>#}
                        <a href="" class="category">{{ category.name }}</a>
                    </li>
                {% endfor %}
                <li><a href='' id="send">发布博客</a></li>
            </ul>
        </div>
    </nav>
    <div class="gcont">
        <div class="row">
            <div class="gj-lg-8">
                <div class="gj-slide1 gcl-hb">
                    <!--响应式轮播图-->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            {% for carousel in carousels %}
                                <div class="swiper-slide">
                                    <a href="{{ url('boke:blog',args=(carousel.blog.id,)) }}"><img
                                            src="{{ carousel.url }}"

                                            alt="{{ carousel.name }}">
                                        <p>{{ carousel.name }}</p></a>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="swiper-pagination"></div>
                        <!--分页器-->
                        <div class="swiper-button-prev">
                            <!--导航小按钮-->
                            <i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i></div>
                        <div class="swiper-button-next">
                            <!--导航小按钮-->
                            <i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true"></i></div>
                    </div>
                </div>

                <div class="gj-wk gcl-hb">
                    <!--媒体列表-->
                    <div class="gj-bt">
                        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 最新发布</h3>
                    </div>
                    <div class="gj-body gul-tuw1">
                        {% for blog in page_blogs %}
                            <div class="gtw-ul gclear">
                                <div class="gtw-img">
                                    <a href="{{ url('boke:blog',args=(blog.id,)) }}"
                                       tppabs="http://demo.demohuo.top/modals/63/6398/demo/13.html"><img
                                            src="{{ blog.image.url }}"
                                            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180313112630855.jpg"
                                            alt="未备案网站免费使用畅言社会化评论系统的教程"></a>
                                </div>
                                <div class="gtw-body">
                                    <a href="13.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/13.html">
                                        <h4>{{ blog.title }}</h4>
                                    </a>
                                    <p>{{ blog.abstract }}</p>
                                    <div class="gtw-sx">
                                        <i class="fa fa-plus-square" aria-hidden="true"> {{ blog.author }}</i>
                                        <i class="fa fa-clock-o"
                                           aria-hidden="true"> {{ blog.create_time.strftime('%Y-%m-%d %H:%M:%S') }}</i>
                                        <i class="fa fa-eye" aria-hidden="true"> {{ blog.read_count }}</i>
                                        <a href="index1.html"
                                           tppabs="http://demo.demohuo.top/modals/63/6398/demo/index1.html"><i
                                                class="fa fa-folder-open"
                                                aria-hidden="true"> {{ blog.category.name }}</i></a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <!--gul-tuw1-结束-->
                    <div class="r_wrap fr clearfix">
                        ......
                        <div class="pagenation">
                            <div id="pagination" class="page"></div>
                        </div>
                    </div>
                </div>

                <div class="gj-gg">
                    <a href="javascript:;" target="_blank" title="建站就选YzmCMS！"><img
                            src="/static/picture/180121054109100.jpg"
                            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180121054109100.jpg"></a>
                </div>
                <div class="gj-wk gcl-hb hidd">
                    <!--媒体列表-->
                    <div class="gj-bt">
                        <h3><i class="fa fa-html5" aria-hidden="true"></i> 作品分享</h3>
                        <a href="index1.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/index1.html"><i
                                class="fa fa-angle-double-left" aria-hidden="true"></i> 查看更多</a></div>
                    <div class="gj-body gul-tuw2">
                        <div class="gj-lg-4 gj-md-3 gj-sm-4 gj-xs-6">
                            <div class="gtw-ul">
                                <div class="gtw-img"><a href="21.html"
                                                        tppabs="http://demo.demohuo.top/modals/63/6398/demo/21.html"><img
                                        src="/static/picture/180201112418133.jpg"
                                        tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180201112418133.jpg"
                                        alt="响应式橙色大气html5企业网站模板GJ-qiye（YzmCMS整站版）"></a> <span>企业模板</span></div>
                                <div class="gtw-body"><a href="21.html"
                                                         tppabs="http://demo.demohuo.top/modals/63/6398/demo/21.html">
                                    <h4>响应式橙色大气html5企业网站模板GJ-qiye（YzmCMS整站版）</h4>
                                </a>
                                    <p>响应式橙色大气html5企业网站模板GJ-qiye（YzmCMS整站版），自适应PC端、ipad、手机端，...</p>
                                    <div class="gtw-sx"><span>阅读：6089</span> | <span>发布时间：2018-02-01</span></div>
                                </div>
                            </div>
                        </div>
                        <!--gj-lg-4-结束-->
                        <div class="gj-lg-4 gj-md-3 gj-sm-4 gj-xs-6">
                            <div class="gtw-ul">
                                <div class="gtw-img"><a href="12.html"
                                                        tppabs="http://demo.demohuo.top/modals/63/6398/demo/12.html"><img
                                        src="/static/picture/180201024857924.jpg"
                                        tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180201024857924.jpg"
                                        alt="响应式HTML5黑白系个人网站主题GJ-blog1.0清爽版"></a> <span>博客模板</span></div>
                                <div class="gtw-body"><a href="12.html"
                                                         tppabs="http://demo.demohuo.top/modals/63/6398/demo/12.html">
                                    <h4>响应式HTML5黑白系个人网站主题GJ-blog1.0清爽版</h4>
                                </a>
                                    <p>响应式HTML5黑白系个人模板主题GJ-blog1.0清爽版，自适应ipad、手机端，主题代码结构简洁...</p>
                                    <div class="gtw-sx"><span>阅读：6781</span> | <span>发布时间：2018-01-21</span></div>
                                </div>
                            </div>
                        </div>
                        <!--gj-lg-4-结束-->
                    </div>
                    <!--gj-body-结束-->
                </div>
            </div>
            <div class="gj-lg-4">
                <div class="gj-wk gcl-hb">
                    <!--搜索模块-->
                    <div class="gj-bt">
                        <h3><i class="fa fa-search" aria-hidden="true"></i> 站内搜索</h3>
                    </div>
                    <div class="gj-body gj-ss1">
                        <form action="https://www.guojian945.com/index.php">
                            <input type="hidden" name="m" value="search">
                            <input type="hidden" name="c" value="index">
                            <input type="hidden" name="a" value="init">
                            <input type="hidden" name="modelid" value="1" id="modelid">
                            <input type="text" name="q" placeholder="请输入搜索关键词···">
                            <button id="searchbtn" type="submit"></button>
                        </form>
                    </div>
                </div>
                <div class="gj-wk gcl-hb hidd-sm hidd-md">
                    <div class="gj-bt">
                        <h3><i class="fa fa-user-circle-o" aria-hidden="true"></i> 会员信息</h3>
                    </div>

                    <div class="gj-body gj-user">
                        <form action="https://www.guojian945.com/member/index/login.html" method="post">
                            {% if username %}
                                <input type="hidden" name="referer" value="https%3A%2F%2Fwww.guojian945.com%2F">
                                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                                <table cellpadding="0" cellspciong="1">
                                    <div class="div1"><i class="fa fa-user" aria-hidden="true"></i>
                                        <input type="text" required="" name="username" value="{{ username }}"
                                               placeholder="请输入用户名">
                                        <button type="button" name="exit" id="logout" value="退出">退出登陆</button>
                                    </div>
                                    <div class="div3">
                                        <button
                                                type="button" class="change">修改密码？
                                        </button>
                                    </div>


                                </table>
                            {% else %}
                                <input type="hidden" name="referer" value="https%3A%2F%2Fwww.guojian945.com%2F">
                                <table cellpadding="0" cellspciong="1">
                                    <div class="div1"><i class="fa fa-user" aria-hidden="true"></i>
                                        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                                        <input type="text" required="" name="username" id="username" value=""
                                               placeholder="请输入用户名">
                                        <i class="fa fa-lock" aria-hidden="true"></i>
                                        <input type="password" required="" name="password" id="password" value=""
                                               placeholder="请输入密码">
                                    </div>
                                    <div class="div2"><img src=""
                                                           tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/code.jpg"
                                                           id="captcha_img" title="看不清，换一张">
                                        <input type="text" required="" name="code" class="" id="captcha" value=""
                                               placeholder="验证码">
                                        <button type="button" name="dosubmit" id="login" value="登 录">立即登录</button>

                                    </div>
                                    <div class="div3">
                                        <a @click="qq_login"
                                           class="qq_login">
                                            QQ登录</a>
                                        <a href="{{ url('users:register') }}"
                                           tppabs="http://demo.demohuo.top/modals/63/6398/demo/register.html"
                                           class="btn btn-zc"
                                           role="button" target="_self">免费注册</a>
                                        <button
                                                type="button" class="change">修改密码？
                                        </button>
                                    </div>
                                </table>
                            {% endif %}


                        </form>
                    </div>

                </div>

                <div class="gj-wk gcl-hb">
                    <!--侧栏-图文列表-->
                    <div class="gj-bt">
                        <h3><i class="fa fa-thumbs-up" aria-hidden="true"></i> 热度排行</h3>
                    </div>
                    {% for blog in blogs %}
                        <div class="gj-body gli-tuw1">
                            <div class="gtw-li gclear">
                                <div class="gtw-img gj-left"><a href="detail.html"
                                                                tppabs="http://demo.demohuo.top/modals/63/6398/demo/8.html"><img
                                        src="{{ blog.image.url }}"
                                        tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180313112951280.jpg"
                                        alt=""></a></div>
                                <div class="gtw-body"><a href="detail.html"
                                                         tppabs="http://demo.demohuo.top/modals/63/6398/demo/8.html">
                                    <h4>{{ blog.title }}</h4>
                                </a> <span><i
                                        class="fa fa-clock-o">{{ blog.create_time.strftime('%Y-%m-%d %H:%M:%S') }}</i></span>
                                    <span><i
                                            class="fa fa-eye">{{ blog.read_count }}</i></span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <div class="gj-wk gcl-hb">
                    <!--侧栏-图文列表-->
                    <div class="gj-bt">
                        <h3><i class="fa fa-thumbs-up" aria-hidden="true"></i> 博主推荐</h3>
                    </div>
                    {% for recommend in recommends %}
                        <div class="gj-body gli-tuw1">
                            <div class="gtw-li gclear">
                                <div class="gtw-img gj-left"><a href="detail.html"
                                                                tppabs="http://demo.demohuo.top/modals/63/6398/demo/8.html"><img
                                        src="{{ recommend.image.url }}"
                                        tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180313112951280.jpg"
                                        alt=""></a></div>
                                <div class="gtw-body"><a href="detail.html"
                                                         tppabs="http://demo.demohuo.top/modals/63/6398/demo/8.html">
                                    <h4>{{ recommend.title }}</h4>
                                </a> <span><i
                                        class="fa fa-clock-o">{{ recommend.create_time.strftime('%Y-%m-%d %H:%M:%S') }}</i></span>
                                    <span><i
                                            class="fa fa-eye">{{ recommend.read_count }}</i></span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

            </div>
        </div>
    </div>

    <div class="hidd-xs gcl-yh" style="border: 0">
        <!--返回顶部-->
        <a class="gj-top" style="z-index: 1030;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
    </div>

    <footer class="gcl-yh">
        <!--footer底部-->
        <div class="gj-footer">
            <p>Copyright © 2018. 郭健博客 | Powered by <a href="javascript:;" target="_blank">YzmCMS</a></p>
            <p>备案：湘ICP备16017252号-1 博客基于GJ-UI组件、YzmCMS内容管理系统</p>
        </div>
    </footer>
    <!--GJ-UI组件模块html代码结束-->


</div>

<script type="text/javascript" src="/static/js/vue-2.5.16.js"></script>
<script type="text/javascript" src="/static/js/axios-0.18.0.min.js"></script>
<script type="text/javascript" src="/static/js/host.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/login.js"></script>
<!--引入guojian.min.js组件脚本-->
<script src="/static/js/guojian.min.js"
        tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/js/guojian.min.js"
        type="text/javascript"></script>


<script type="text/javascript">
    //一开始 就请求一次验证码
    var id = Math.random();
    $("#captcha_img").prop('src', "{{ url("verifications:img_code") }}?id=" + id);

    //点击图片 修改验证码 其实就是重新请求
    $("#captcha_img").click(function () {
        var id = Math.random();
        //修改请求路径后面的参数，每次不一样，这样就可以重新请求图片了
        $(this).prop('src', "{{ url("verifications:img_code") }}?id=" + id)
    });

    $('.change').click(function () {
        $.ajax({
            url: "{{ url('users:password') }}",
            type: "GET",
            {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
            data: '',
            success: function (data) {
                if (data.code_s == 4101) {
                    alert(data.errmsg);
                    window.location = '/'
                } else {
                    window.location = '/password/'
                }
            },
            error: function (error) {
                console.log(error)
            }
        })
    });

    $('.category').click(function () {
        $.ajax({
            {% for category in categories %}
                url: "{{ url('index:my_index',args=(1,category.id)) }}",
            {% endfor %}
            type: "GET",
            {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
            data: '',
            success: function (data) {
                if (data.code_s == 4101) {
                    alert(data.errmsg);
                    window.location = '/'
                } else {
                    window.location = '/password/'
                }
            },
            error: function (error) {
                console.log(error)
            }
        })
    });

    $('#send').click(function () {
        $.ajax({
            url: "{{ url('users:send_boke') }}",
            type: "GET",
            {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
            data: '',
            success: function (data) {
                if (data.code_s == 4101) {
                    alert(data.errmsg);
                    window.location = '/'
                } else {
                    window.location = '/send_boke/'
                }
            },
            error: function (error) {
                alert(123)
                console.log(error)
            }
        })
    });

    $('#login').click(function () {
        $.ajax({
            url: "/login/",
            type: "post",
            dataType: 'json',
            {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
            data: {
                username: $("#username").val(),
                password: $("#password").val(),
                code: $("#captcha").val(),
                uuid: document.getElementById("captcha_img").src.split('=')[1]
            },
            success: function (data) {
                if (data.code_s == 0) {
                    alert(data.errmsg);
                    window.location = '/'
                } else {
                    alert(data.errmsg);
                    window.location = '/'
                }
                {#$(".ret").val(data)#}
            }
        })
    });

    $('#logout').click(function () {
        $.ajax({
            url: "/logout/",
            type: "get",
            dataType: 'json',
            {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
            data: {},
            success: function (data) {
                if (data.code_s == 0) {
                    alert(data.errmsg);
                    window.location = '/'
                }
                {#$(".ret").val(data)#}
            }
        })
    });

    $(function () {
        $('#pagination').pagination({
            currentPage: {{ page_num }},
            totalPage: {{ total_page }},
            callback: function (current) {
                {#location.href = '/list/115/1/?sort=default';#}
                location.href = current;
            }
        })
    });

</script>

<!--GJ-UI组件模块js代码开始-->
<script>
    /*GJ-UI响应式导航栏*/
    $(document).ready(function () {
        $(".gbar").click(function () {
            $(".gnav-ul").slideToggle("slow");
            return false
        })
    });
</script>
<script>
    /*返回顶部开始*/
    jQuery(function ($) {
        $('.gj-top').toTop({
            autohide: true,
            offset: 320,
            speed: 500,
            right: 15,
            bottom: 15
        })
    });
</script>
<script>
    //轮播图
    var mySwiper = new Swiper('.swiper-container', {
        loop: true, //循环切换
        autoplay: true, //自动切换

        autoplay: {
            disableOnInteraction: false,
        },

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })
</script>
<!--GJ-UI组件模块js代码结束-->
</body>

</html>